import React, { Component } from 'react'
import { connect } from 'dva';
import { Row, Col, Card, Avatar, Icon, Tag, Form, Input, Button, Divider, Table } from 'antd';

class Personal extends Component {
    componentDidMount() {
        this.getTable()
        let { form, userinfo } = this.props;
        // //给form赋值
        form.setFieldsValue({
            'username': userinfo.name,
            'password': userinfo.password
        });
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    }

    getTable = current =>{
        this.props.dispatch({
            type: 'personal/getDataSource',
            payload:{
                data:{currPage:current || 1},
                method:'GET'
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { dataSource, current, totalPage, columns } = this.props.personal
        const paginationProps = {
            showQuickJumper: false,
            pageSize: 10,
            defaultCurrent:current,
            total: (totalPage * 10),
            onChange: (current) => this.getTable(current),
          };
        return (
            <Row type='flex' justify='space-between'>
                <Col span={8}>
                    <Card hoverable title="个人资料">
                        <div style={{ textAlign: 'center' }}>
                            <Avatar size={100} src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" />
                            <h2>Dali</h2>
                            <Tag color="#2db7f5" style={{ margin: 0 }}>管理员</Tag>
                        </div>
                        <Divider />
                        <div>
                            <Form onSubmit={this.handleSubmit} className="login-form">
                                <Form.Item label="用户名">
                                    {getFieldDecorator('username', {
                                        rules: [{ required: true, message: 'Please input your username!' }],
                                    })(
                                        <Input
                                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder="Username"
                                        />,
                                    )}
                                </Form.Item>
                                <Form.Item label="密码">
                                    {getFieldDecorator('password', {
                                        rules: [{ required: true, message: 'Please input your Password!' }],
                                    })(
                                        <Input.Password
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            type="password"
                                            placeholder="Password"
                                        />,
                                    )}
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit" block>
                                        修改
                                    </Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </Card>
                </Col>
                <Col span={15}>
                    <Card title="未读信息">
                        <Table 
                        rowKey={record => record.id}
                        dataSource={dataSource} 
                        columns={columns} 
                        expandedRowRender={record => <p style={{ margin: 0 }}>{record.comment}</p>}
                        pagination={ paginationProps }
                        bordered
                        />
                    </Card>
                </Col>
            </Row>
        )
    }
}

const mapStateToProps = state => {
    return {
        userinfo: state.userinfo.userinfo,
        personal: state.personal
    }
}

Personal = Form.create({ name: 'personalForm' })(Personal);

export default connect(mapStateToProps)(Personal)